<template>
	<div class="login__container w-full">
		<div class="flex-1 flex items-center justify-center">
			<div class="login__card flex rounded-sm">
				<div class="flex-1 h-full hidden md:inline-block">
					<el-image
						src="http://qiniu.picgo.srliforever.ltd/%E6%98%9F%E7%A9%BA%20%E5%A5%B3%E5%AD%A9%E5%AD%90%20%E5%A5%BD%E7%9C%8B%20%E5%94%AF%E7%BE%8E%20%E5%8A%A8%E6%BC%AB%E9%AB%98%E6%B8%85%E5%A3%81%E7%BA%B8_%E5%BD%BC%E5%B2%B8%E5%A3%81%E7%BA%B8.jpg"
						fit="cover"
						class="h-full w-full"
						style="width: 400px; height: 100%; border-radius: 0"
					></el-image>
				</div>
				<div class="login-form bg-white bg-body flex flex-col justify-center px-10 py-10 md:w-[400px] w-[375px] flex-none mx-auto">
					<div class="text-center text-3xl font-medium mb-8" data-v-5a9bc6ac="">{{ $themeConfig.app.appName }}</div>
					<el-form ref="formRef" :model="formData" size="large" :rules="rules" autocomplete="new-password">
						<el-form-item>
							<el-input placeholder="请输入用户名" v-model="formData.account" clearable @keyup.enter="handlerKey">
								<template #prepend>
									<el-icon>
										<User />
									</el-icon>
								</template>
							</el-input>
						</el-form-item>
						<el-form-item>
							<el-input placeholder="请输入密码" v-model="formData.password" clearable show-password @keyup.enter="handlerKey">
								<template #prepend>
									<el-icon>
										<Lock />
									</el-icon>
								</template>
							</el-input>
						</el-form-item>
						<!-- 记住密码 -->
						<el-form-item>
							<el-checkbox v-model="formData.rememberMe">记住密码</el-checkbox>
						</el-form-item>
						<el-form-item>
							<el-button :loading="formloading" type="primary" class="w-full" plain @click="toLogin">登录</el-button>
						</el-form-item>
					</el-form>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { User, Lock } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import { $themeConfig } from "@CORE/app-config/index";
import { ElMessage } from "element-plus";

const { login } = userApi();
const router = useRouter();
const formData = reactive({
	account: "",
	password: "",
	code: "1234"
});
const lockLogin = ref(0);

const formRef = ref(null);
const formloading = ref(false);
const rules = {
	account: [
		{
			required: true,
			message: "请输入账号",
			trigger: ["blur"]
		}
	],
	password: [
		{
			required: true,
			message: "请输入密码",
			trigger: ["blur"]
		}
	]
};

const handlerKey = () => {
	toLogin();
};
const toLogin = () => {
	formloading.value = true;
	lockLogin.value++;
	if (lockLogin.value > 3) {
		formloading.value = false;
		ElMessage.error("失败次数过多，请稍后再试！");
		setTimeout(() => {
			lockLogin.value = 0;
		}, 1000 * 60 * 5);
		return;
	}
	formRef.value
		.validate(async valid => {
			if (valid) {
				try {
					await login(formData);
					await router.push("/");
				} catch (error) {
					formloading.value = false;
				}
			}
		})
		.catch(() => {
			formloading.value = false;
		});
};
</script>

<style scoped lang="scss">
.login__container {
	background-image: url(../../../assets/images/login_bg.2f630cea.png);
	min-height: 100vh;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	@apply flex flex-col;
	.login__card {
		height: 400px;
	}
}
</style>
